<template>
  <fd-vuex :store="store">
    <fd-search  :columns="searchColumns" :data="searchData" @event="searchEvent" style="float: right;" />
      <fd-table :columns="tableColumns" :data="tableData" :page="tablePage" :config="tableConfig" @event="tableEvent" />
      <el-dialog :title="dialog.title" :visible.sync="dialog.visible">
        <fd-form  :columns="formColumns" :data="formData" ref="form" @submit="formSubmit" />
      </el-dialog>
  </fd-vuex>
</template>

<script> 
  import { getUserPcDepartmentTreeList } from '@/api/user'
  import { insertWorkDepartmentRule, selectWorkDepartmentRule } from '@/api/kaoqin'
  var pageParams = {page: {pageNo: 1, pageSize: 10}}
  export default {
    data() {
      return {
        store: {
          showDeletes: false,
          edit: true
        }, 
        searchColumns: [ 
          { type: 'button-primary', prop: 'addtion', value: '新增' },
          { type: 'button-danger', prop: 'deletes', value: '删除选中', load: ({store}) => store.showDeletes }
        ],
        searchData: {},
        tableColumns: [
          { type: 'span', prop: 'ruleName', label: '名称' },
          { type: 'span', prop: 'departmentName', label: '部门' }, 
          { type: 'span', prop: 'calcStartDay', label: '考勤开始(号)' },
          { type: 'span', prop: 'calcEndDay', label: '考勤结束(号)' },
        ],
        tableData: [],
        tableConfig: {},
        tablePage: {
          pageSize: 15,
          pageNo: 1,
          total: 55
        },
        formColumns: [
          { type: 'input', prop: 'ruleName', label: '名称', rule: 'must' },
          { type: 'cascader', prop: 'departmentName', label: '部门', rule: 'must', config: {changeOnSelect: true}, options: (resolve) => {
              getUserPcDepartmentTreeList({}).then(res => {
                resolve(res.data) 
              })
          } }, 
          { type: 'counter', prop: 'calcStartDay', rule: 'must', label: '考勤开始(号)', min: 1, max: 31 },
          { type: 'counter', prop: 'calcEndDay', rule: 'must', label: '考勤结束(号)', min: 1, max: 31 },
          { type: 'select-multiple', prop: 'workRestDays', options: {1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六', 0: '星期日'}, label: '休息日' },
          [
            { type: 'button-primary', prop: '$submit', value: '提交', load:({store}) => store.edit },
            { type: 'button', prop: '$reset', value: '重置', load:({store}) => store.edit },
            { type: 'formitem' }
          ]
        ],
        formData: {positionRange: 200, calcStartDay: 1, calcEndDay: 30},
        dialog: {
          title: '',
          visible: false
        }  
	  }		
    }, 
    created() {
      getUserPcDepartmentTreeList({}).then(res => {
        this.formColumns[0].options = res.data 
      })
    },
    mounted() {
      this.loadData()
    },
    methods: {
      loadData() { 
        selectWorkDepartmentRule(pageParams).then(res => { 
          this.tableData = res.data.data
          this.tablePage = res.data.page
        })
      },
      searchEvent(params) {
        if (params.prop == 'addtion') {
          this.showDialog('添加', true)
          setTimeout(() => {
            this.$refs.form.reset()
          }, 10);
        } 
      },
      formSubmit(data) {
        if (this.dialog.title == '添加') {  
          data.departmentId = data.departmentName[data.departmentName.length - 1]
          data.workRestDays = data.workRestDays.toString()
          insertWorkDepartmentRule(data).then(res => {
            this.loadData()
          })
          this.tableData.push(data)
        } else {
          alert("修改的数据为:" + JSON.stringify(data))
        }
        this.dialog.visible = false
      },
      showDialog(title, edit) {
        this.store.edit = edit
        this.dialog.title = title
        this.dialog.visible = true
      },
      tableEvent(params) {
        if (params.prop == '$selection') {
          this.store.showDeletes = params.row.length ? true : false
          this.selectData = params.row
        } else if (params.prop == 'edit') { 
          this.showDialog('修改', true)
          setTimeout(() => {
            this.formData = params.row
          }, 10);
        } else if (params.prop == 'delete') {
          this.tableData.splice(params.$index, 1)
        } else if (params.prop == 'detail') {
          this.showDialog('详情', false)
          this.formData = params.row
        } else if (['$pageNo', '$pageSize'].includes(params.prop)){
          if (params.prop == "$pageNo")
            pageParams.page.pageNo = params.value
          else 
            pageParams.page.pageSize = params.value

          this.loadData()
        }
      }
    }
}

</script>